<template>
    <view class="box">
    	<view class="course-list">
    		<view class="cou-item" v-for="course in courseList" :key="course.id" @click="gocourseDetails(course.id)">
    			<view class="cou-image" v-if="!course.picture">
					<image src="/static/campus/tj-bg.png" mode="aspectFill"></image>
					<view class="cou-image-title">
						<text>{{course.name.length>=8 ? course.name.slice(0, parseInt(course.name.length/2)) : course.name}}</text>
						<text v-if="course.name.length>=8">{{course.name.slice(parseInt(course.name.length/2))}}</text>
					</view>
				</view>
				<image v-else class="cou-image" :src="api.xiaodeObsUrl+course.picture" mode="aspectFill"></image>
    			<view class="right">
    				<view class="cou-title"><text>{{course.name}}</text></view>
    				<text class="cou-tag" :style="{background: utils.tagBgColor(label), display: label?'inline':'none'}" v-for="(label, Linx) in labelHandle(course.labels)" :key="Linx">{{label}}</text>
    				<view class="cou-name-num">
    					<text class="teacher-name">{{course.lecturer}}</text>
    					<text v-if="modId">{{course.view_num}}次观看</text>
						<text v-else>{{utils.handleRecomTime(course.update_time)}}</text>
    				</view>
    			</view>
    		</view>
    	</view>
    	<view class="no-more">
			<uni-load-more :status="load_more" :content-text="contentText"></uni-load-more>
    	</view>
    </view>
</template>
<script>
export default {
    data() {
        return {
			tagColor: ['#FF6010', '#FF8F1F', '#00B578', '#1677FF'],
			courseList: [],
			curPage: 1,
			modId: '',
			load_more: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: ' ',
				contentnomore: '- 没有更多了 -'
			},
        }
    },
	onLoad(options){
		this.modId = options.modId

		uni.setNavigationBarTitle({
			title: options.modName||'最近更新'
		})
		this.getCurriculumList()
		
	},
	onReachBottom(){
		if(this.load_more == 'no-more') return;
		this.curPage ++
		this.getCurriculumList()
	},
	methods: {
		getCurriculumList(){
			this.load_more = 'loading'
			if(this.modId){
				this.getCurriculumByMod(this.modId)
			}else{
				this.getNewUpdateCurriculum()
			}
		},
		// 标签处理
		labelHandle(str){
			if(str.indexOf(';')!=-1){
				return str.split(';')
			}
			if(str.indexOf('；')!=-1){
				return str.split('；')
			}
			console.log(76, str)
			return [str]
		},
		// 获取最近更新的课程
		getNewUpdateCurriculum(){
			this.api.get('happy/getNewUpdateCurriculum', {
				page: this.curPage,
				limit: 10
			}).then(res=>{
				if(res.data.state!='ok') return
				let list = res.data.cPage.list;
				if(list.length<10){
					this.load_more = 'no-more'
				}
				this.courseList = this.courseList.concat(list)
			})
		},
		getCurriculumByMod(modId){
			this.api.post('happy/getCurriculumByMod', {
				modId: modId,
				page: this.curPage,
				limit: 10
			}).then(res=>{
				if(res.data.state!='ok') return
				let list = res.data.cPage.list;
				if(list.length<10){
					this.load_more = 'no-more'
				}
				this.courseList = this.courseList.concat(list)
			})
		},
		gocourseDetails(id){
			uni.navigateTo({
				url: '/pages/recommend/course-details?id='+id
			})
		}
		
	}
}
</script>
<style lang="less" scoped>
	page{
		background-color: #F9F9F9!important;
	}
	.box{
		// #ifdef APP-PLUS
		min-height: 100vh;
		// #endif
		background-color: #F9F9F9
	}
	.course-list{
		border-top: 1rpx solid #EEEEEE;
		padding: 24rpx 24rpx 16rpx;
		background-color: #fff;
	}
	.cou-item{
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
		margin-bottom: 24rpx;
		padding-bottom: 24rpx;
		image{
			width: 216rpx;
			height: 136rpx;
			border-radius: 20rpx;
		}
		.right{
			width: calc(100% - 240rpx);
		}
		&:last-child{
			border: none;
			margin-bottom: 0;
		}
	}
	.cou-image{
		position: relative;
		margin-right: 24rpx;
	}
	.cou-image-title{
		position: absolute;
		top: 44rpx;
		width: 100%;
		line-height: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
	}
	.cou-title{
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	.cou-tag{
		margin-right: 24rpx;
		font-size: 22rpx;
		background-color: #FF6010;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		color: #fff;
	}
	.cou-name-num{
		margin-top: 17rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		text{
			white-space: nowrap;
		}
		.teacher-name{
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.no-more{
		padding: 24rpx;
		background: #F9F9F9;
		color: #BFBFBF;
		text-align: center;
	}
</style>